<template>
  <a-transfer
    :data-source="mockData"
    show-search
    :list-style="{
      width: '250px',
      height: '300px',
    }"
    :operations="['to right', 'to left']"
    :target-keys="targetKeys"
    :render="(item) => `${item.title}-${item.description}`"
    @change="handleChange"
  >
    <template #footer>
      <a-button size="small" style="float: right; margin: 5px" @click="getMock"
        >reload</a-button
      >
    </template>
    <template #notFoundContent>
      <span>没数据</span>
    </template>
  </a-transfer>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
  setup() {
    const mockData = ref([]);
    const targetKeys = ref([]);
    onMounted(() => {
      getMock();
    });

    const getMock = () => {
      const keys = [];
      const mData = [];

      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };

        if (data.chosen) {
          keys.push(data.key);
        }

        mData.push(data);
      }

      mockData.value = mData;
      targetKeys.value = keys;
    };

    const handleChange = (keys, direction, moveKeys) => {
      targetKeys.value = keys;
      console.log(keys, direction, moveKeys);
    };

    return {
      mockData,
      targetKeys,
      handleChange,
      getMock,
    };
  },
});
</script>
